<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,
        .comp-b,
        .comp-c,
        .comp-d {
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <!-- 根组件 -->
    <div id="app">
        <p>
            <button @click="compName='LaowangA'">组件A</button>
            <button @click="compName='LaowangB'">组件B</button>
            <button @click="compName='LaowangC'">组件C</button>
            <button @click="compName='LaowangD'">组件D</button>
        </p>

        <keep-alive>
            <component :is="compName"></component>
        </keep-alive>
    </div>
</body>
<script>

    let LaowangA = {
        data() {
            return {
                count: 1
            }
        },
        template: `<div class="comp-a">
                    这是A组件:{{count}}
                    <p><button @click="count++">count++</button></p>
                </div>`,
        mounted() {
            console.log("组件A挂载");
        },
        destroyed() {
            console.log("组件A销毁");
        },
        activated() {
            console.log("组件A 激活");
        },
        deactivated() {
            console.log("组件A 失活");
        }

    }

    let LaowangB = {
        data() {
            return {
                count: 1,
                timer: null,
            }
        },
        template: `<div class="comp-b">
                    这是B组件:{{count}}
                </div>`,
        methods: {
            start() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.count++
                }, 1000)
            },
            stop() {
                clearInterval(this.timer);
            }
        },
        mounted() {
            this.start();
            console.log("组件B挂载");
        },
        beforeDestroy() {
            this.stop();
        },
        destroyed() {
            console.log("组件B销毁");
        },
        activated() {
            this.start();
            console.log("组件B 激活");
        },
        deactivated() {
            this.stop();
            console.log("组件B 失活");
        }
    }

    let LaowangC = {
        data() {
            return {
                isFirst: false,
            }
        },
        template: `<div class="comp-c">
                    这是C组件:
                </div>`,
        mounted() {
            console.log("组件C挂载");
        },
        destroyed() {
            console.log("组件C销毁");
        },
        activated() {
            console.log("组件C 激活");
        },
        deactivated() {
            console.log("组件C 失活");
        }
    }


    // 异步组件 
    // Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义
    // Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。


    Vue.component('LaowangD', function (resolve, reject) {
        console.log("异步组件准备解析");
        setTimeout(function () {
            // 向 `resolve` 回调传递组件定义
            resolve({
                template: `<div class="comp-d">
                    这是D组件:
                </div>`,
                mounted() {
                    console.log("组件D挂载");
                },
                destroyed() {
                    console.log("组件D销毁");
                },
                activated() {
                    console.log("组件D 激活");
                },
                deactivated() {
                    console.log("组件D 失活");
                }
            })

        }, 2000)
    })





    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el: "#app",
        data: {
            compName: "LaowangA",
        },
        methods: {
            update: function (val) { // this => vm
                this.count = val;
            }
        },
        components: {
            // components 局部组件注册 (使用时才会被注册)
            // 对象的键名: 就是局部组件的组件名
            // 对象的键值: 局部组件的配置项 
            LaowangA,
            LaowangB,
            LaowangC,
        },
        provide: {

        }
    })



</script>

</html>